<!--引入thymeleaf模板-->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<div class="layui-col-sm12" id="myday">
    <header>
        <nav class="todo-nav layui-row">
            <ul class="edit">
                <li>
                    <a href="" class="iconfont icon-leftarrow
                                        layui-col-sm1"></a>
                </li>
                <li><a href="" class="layui-col-sm1
                                        layui-col-sm-offset10">完成</a></li>
            </ul>
            <ul class="normal layui-row">
                <li>
                    <a href="" class="iconfont icon-leftarrow
                                        layui-col-sm1"></a>
                </li>
                <li><a href="" class="layui-col-sm1
                                        layui-col-sm-offset9">主题</a></li>
                <li>
                    <a href="" class="iconfont icon-category
                                        layui-col-sm1"></a>
                </li>
            </ul>
        </nav>
        <div class="myday-title">
            <div>
                <h1>我的一天</h1>
                <p>10月22日 星期四</p>
            </div>
        </div>
    </header>
    <section class="todo-bd">
        <ul class="undone" th:each="backlogs:${session.backlogs}">

            <li><i class="iconfont icon-default-template"></i>
                <p contenteditable="true" th:text="${backlogs.content}">点击此处可编辑</p>
                <i class="iconfont icon-collection important-color "></i>
            </li>

            <li><i class="iconfont icon-default-template"></i>
                <p contenteditable="true">点击此处可编辑</p>
                <i class="iconfont icon-collection important-color "></i>
            </li>
            <li><i class="iconfont icon-default-template"></i>
                <p contenteditable="true">
                    字数不限制字数不限制字数不限制字数iconfont 不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制</p>
                <i class="iconfont icon-collection-fill important-color "></i>
            </li>
        </ul>
        <ul class="finish">
            <h4 class="finish-title">
                已完成
            </h4>
            <li><i class="icon-ashbin"></i>
                <p>不可编辑</p>
                <i class="icon-return "></i>
            </li>
            <li><i class="icon-ashbin"></i>
                <p contenteditable="true">
                    字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制</p>
                <i class="icon-return "></i>
            </li>
        </ul>


    </section>
    <div class="add">
        <div class="add-selection">
            <ul>
                <li><a href="javascript:;" class="iconfont icon-collection"></a></li>
                <li><a href="javascript:;" class="iconfont icon-signboard"></a></li>
                <li><a href="javascript:;" class="iconfont icon-default-template"></a></li>
            </ul>
        </div><i class="iconfont icon-add-select"></i><input type="text" placeholder="添加任务"></div>
</div>
<script>
    $('.add input').on({
            //获得焦点时样式变化并且上面可完成
            focus: function() {
                $(this).parent('.add').css({
                    'width': '74%',
                    'margin': '10px 17px 10px 0',
                    'border-radius': '0'
                })
                $('.edit').css('display', 'block')
                $('.normal').css('display', 'none')
            },
            //失去焦点时样式变化并且上面为正常
            blur: function() {
                $(this).parent('.add').css({
                    'width': '72%',
                    'margin': '10px 2%',
                    'border-radius': '10px'
                })
                $('.edit').css('display', 'none')
                $('.normal').css('display', 'block')
            }
        })
        $('.edit li:last-child a').click(function(){
            // let li = $('')
        })
        //点击添加为重要,完成等
    $('.todo-bd').delegate('.undone li i:last-child', 'click', function() {
        $(this).toggleClass('icon-collection')
        $(this).toggleClass('icon-collection-fill')
    })
    $('.todo-bd').delegate('.undone li i:first-child', 'click', function() {
        $(this).parent('li').detach()
        $(this).removeClass('icon-default-template')
        $(this).addClass('icon-ashbin')
        $(this).siblings('i').removeClass('icon-collection-fill icon-collection important-color')
        $(this).siblings('i').addClass('icon-return')
        $(this).parent('li').appendTo('.finish')
    })
    $('.todo-bd').delegate('.finish li i:last-child', 'click', function() {
        $(this).parent('li').detach()
        $(this).removeClass('icon-return')
        $(this).addClass(' icon-collection important-color')
        $(this).siblings('i').removeClass('icon-ashbin')
        $(this).siblings('i').addClass('icon-default-template')
        $(this).parent('li').appendTo('.undone')
    })
    $('.todo-bd').delegate('.finish li i:first-child', 'click', function() {
            $(this).parent('li').remove()
        })
        //增加标签操作
    $('.add .icon-add-select').click(function(){
        $('.add .add-selection').css('display')==='none'?$('.add .add-selection').css('display','block'):$('.add .add-selection').css('display','none')
    })
    $('.add-selection li:nth-child(1) a').click(function(){
        $(this).toggleClass('important-color')
    })
    $('.add-selection li:nth-child(2) a').click(function(){
        $(this).toggleClass('plan-color')
    })
    $('.add-selection li:nth-child(3) a').click(function(){
        $(this).toggleClass('task-color')
    })
    let date = new Date()
    let month = date.getMonth()
    let day = date.getDate()
    let week = date.getDay()
    let weeks = ['日','一','二','三','四','五','六'] 
    for (let i = 0; i < weeks.length; i++) {
        if(i==week){
            week = weeks[i]
        }
    }
    $('.myday-title p').text((month+1)+'月'+day+'日  星期'+week)
</script>